<template>
  <div>
    <Carousel />
    <Search />

    <!-- element-ui布局 -->
    <el-row gutter="20">
      <el-col :span="20">

        <Level @getLevel="getLevelfather" />
        <Region />
        <!-- 医院展示结构 -->

        <div class="hospital">
          <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index"  :hospitalInfo="item"/>
        </div>

        <!-- 分页器               ->  是把样式顶到左右侧  注意 不能放在display：flex 弹性盒子中-->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[1, 2, 5, 10]"
            :background="true"
            layout=" prev, pager, next, jumper,->,sizes,total"
            :total="20"
            @current-change="currentChange"
            @size-change="sizeChange"
          />
      </el-col>
      <el-col :span="4">456</el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import Carousel from "./carousel/index.vue";
import Search from "./search/index.vue";
import Level from "./level/index.vue";
import Region from "./region/index.vue";
import Card from "./card/index.vue";



//给分页器加数量
import { onMounted,ref } from 'vue'
import { reqHospital } from '@/api/home'

import  type { Content,HospitalResponseData } from '@/api/home/type'


let pageNo = ref<number>(1);
let pageSize = ref<number>(10);

let hasHospitalArr = ref<Content>([]);  //对返回值的类型 进行约束

let total = ref(0);

onMounted(()=>{
  getHospitalInfo();
})

const currentChange=()=>{
  getHospitalInfo();
}

const sizeChange=()=>{
  getHospitalInfo();
}

const getHospitalInfo = async() =>{
  let result:any =  await reqHospital(pageNo.value,pageSize.value,hostype.value,districtCode.value)
  let result2:HospitalResponseData = result.data;
  //result 的 直接打出的格式 是 { code :  message  data  ok} 四个选项                     
  //  console.log(result2)
  if(result2.code==200){
    // console.log('okokokkoko')
     //存储已有的医院数据
      hasHospitalArr.value = result2.data.content;
      //存储医院的总个数
      total.value = result2.data.totalElements;
  }
};




//存储医院等级数据
let hostype = ref<string>('')

//存储医院地区数据

let districtCode =ref<string>('')

const getLevelfather = (myson:string)=>{
    console.log(myson)
    hostype.value = myson;
}

</script>
<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>
